<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>自定义指令</title>
		<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" />
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body ng-app="myApp">
		<!--
        	作者：maweichao90@126.com
        	时间：2016-01-02
        	描述：自定义指令
        -->
		<div class="col-md-6">
			<h1>元素声明E</h1>
			<hello>
				<div>添加学生信息</div>
			</hello>
			<h1>样式声明C</h1>
			<div class="hello">
				<div>添加学生信息</div>
			</div>
			<h1>属性声明A</h1>
			<div hello>
				<div>添加学生信息</div>
			</div>
			<h1>注释声明C</h1>
			<!-- directive:hello -->
		</div>
		<script type="text/javascript">
			var mymodule = angular.module('myApp', []);
			//先缓存下自己的模版
			mymodule.run(function($templateCache) {
				$templateCache.put("form", 'tpl.html');
			})
			mymodule.directive('hello', function($templateCache) {
				return {
					restrict: 'AEMC',
					//template: '<a href="www.baidu.com">百度连接</a>',
					transclude: true, //把dom中的元素放到模版中 在模版某个元素中声明ng-transclude即可放到该位置
					templateUrl: $templateCache.get("form"),
					replace: true,
				}
			});
		</script>
	</body>

</html>